<template>
  <view class="main">
    <view class="bg">
      <image src="/static/mine/txbg.png" mode="aspectFill"/>

      <view class="content">
        <view class="title">请输入本次提现金额</view>
        <view class="ipt-box dispaly-center">
          <view class="m-icon">
            <image src="/static/mine/qian.png" mode="aspectFill"/>
          </view>
          <view class="ipt">
            <input type="text" placeholder="0.0">
          </view>
        </view>
        <view class="tip">可提现金额（元）666.66</view>
        <view class="from dispaly-center">
          <view class="from-icon">
            <image src="/static/mine/txwx.png" mode="aspectFill"/>
          </view>
          <view class="from-tip">到微信</view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-box">
    <view class="item-box dispaly-just-between">
      <view class="item" >
        <view class="b-txt dispaly-align-center" @click="takeConfirm">提现</view>
        <image src="/static/icon/jd-btn.png" mode="aspectFill"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';

const takeConfirm = () => {
  uni.navigateTo({
    url: `/subPackage/index/takeDetail`
  })
}

</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
}
.bg {
  width: 690rpx;
  height: 482rpx;
  background-color: #ffd257;
  position: relative;
  image {
    width: 690rpx;
    height: 482rpx;
  }
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40rpx;
  .title {
      font-family: IPix;
      font-size: 28rpx;
      color: #000000;
  }
  .ipt-box {
    margin-top: 40rpx;
    border-bottom: 1rpx solid #e6bd4e;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    .m-icon {
      margin-right: 40rpx;
      image {
        width: 42rpx;
        height: 58rpx;
      }
    }
    .ipt {
      input {
        font-family: IPix;
        font-size: 50rpx;
        color: #4e3b0c;
        height: 58rpx;
      }
    }
  }
  .tip {
    color: #83681c;
    font-size: 28rpx;
    font-family: IPix;
  }
  .from {
    margin-top: 130rpx;
    .from-icon {
      margin-right: 20rpx;
      image {
        width: 70rpx;
        height: 42rpx;
      }
    }
    .from-tip {
      font-family: IPix;
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.btn-box {
  border: 6rpx solid #4e3b0c;
  border-bottom: none;
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;
  box-sizing: border-box;
  .item-box {
    padding: 18rpx 26rpx 0 26rpx;
    .item {
      position: relative;
      width: 692rpx;
      height: 82rpx;
      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 692rpx;
        height: 82rpx;
      }
      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #FFD257;
        width: 692rpx;
        height: 82rpx;
      }
    }
  }
}
</style>